<template>
  <div class="left-card">
    <m-card :width="439" :height="311" title="财投链">
      <div class="ct_group">
        <div class="ct_group_item" @click="showTable(item)" v-for="(item,index) in pageData.ctData" :key="'ct'+index">
          <div class="ct_group_item_img">
            <img :src="item.img" style="width: 100%; height: 100%;"/>
          </div>
          <div class="ct_group_item_title">
            {{item.title}}
          </div>
          <div class="ct_group_item_value">
            {{item.value}}
            <span class="ct_group_item_unit">{{item.unit}}</span>
          </div>
          
        </div>
      </div>
      <!-- <div class="pie-chat-wrap">
        <div class="pie-chat">
          <m-pie
            ref="pie"
            :data="state.pieData"
            :delay="3000"
            :colors="state.pieDataColor"
            :opacity="0.6"
            class="pieCanvas"
          >
            <template v-slot:default="slotProps">
              <div class="pieCanvas-content">
                <div class="pieCanvas-content-value">
                  <mCountTo
                    :startVal="0"
                    :endVal="getNumber(slotProps)"
                    :decimals="2"
                    :duration="1000"
                    :autoplay="true"
                  ></mCountTo>
                  %
                </div>
                <div class="pieCanvas-content-name">
                  {{ slotProps.data.name }}
                </div>
              </div>
            </template>
          </m-pie>
        </div>

        <div class="pie-legend">
          <div class="pie-legend-item" v-for="(item, index) in state.pieData" :key="index">
            <div class="icon" :style="{ borderColor: state.pieDataColor[index] }"></div>
            <div class="name">{{ item.name }}</div>
            <div class="value">{{ item.value }}<span class="unit">亿</span></div>
          </div>
        </div>
      </div> -->

    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick ,defineEmits} from "vue"
import mCard from "@/components/mCard/index.vue"
import mPie from "@/components/mPie/index.vue"
import mCountTo from "@/components/mCountTo/index.js"
import ztkfIcon from '@/assets/images/map/ztkf_icon.png'
import ztyeIcon from '@/assets/images/map/ztye_icon.png'
import bntfjeIcon from '@/assets/images/map/bntfje_icon.png'
import ljkhIcon from '@/assets/images/map/ljkh_icon.png'
import ljtfjeIcon from '@/assets/images/map/ljtfje_icon.png'
import ljfwdqIcon from '@/assets/images/map/ljfwdq_icon.png'
const pageData=reactive({
  ctData:[
    {
      img:ztkfIcon,
      title:"在投客户数量",
      value:466,
      unit:"个"

    },
    {
      img:ztyeIcon,
      title:"在投业务余额",
      value:58.65,
      unit:"亿元"

    },
    {
      img:bntfjeIcon,
      title:"本年投放金额",
      value:124.65,
      unit:"亿元"

    },
    {
      img:ljkhIcon,
      title:"累计客户数量",
      value:251,
      unit:"个"

    },
    {
      img:ljtfjeIcon,
      title:"累计投放金额",
      value:54.21,
      unit:"亿元"

    },
    {
      img:ljfwdqIcon,
      title:"累计服务地区",
      value:120,
      unit:"个"

    }

  ]
})
const pie = ref(null)
const state = reactive({
  pieDataColor: ["#17E6C3", "#40CFFF", "#1979FF", "#FFC472"],
  pieData: [
    {
      name: "类型1",
      value: 400,
    },
    {
      name: "类型2",
      value: 250,
    },
    {
      name: "类型3",
      value: 200,
    },
    {
      name: "类型4",
      value: 150,
    },
  ],
})
function getNumber(slotProps) {
  return Number(((slotProps.data.value / slotProps.data.count) * 100).toFixed(2))
}
const emit = defineEmits(['showTable','hideTable']);
const showTable = (data)=>{
  emit('showTable', 1); // 触发事件并传递数据
}
const hideTable = (data)=>{
  emit('hideTable', data); // 触发事件并传递数据
}


</script>
<style scoped lang="scss">
.pie-chat-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}
// 饼图
.pie-chat {
  pointer-events: all;
  position: relative;
  width: 236px;
  height: 100%;

  .pieCanvas {
    width: 100%;
    height: 100%;
    pointer-events: all;
  }
  .pieCanvas-content {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    &-value {
      font-size: 15px;
      font-weight: bold;
      text-shadow: 0 0 10px rgb(0 0 0);
    }
    &-name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
  }
}
// 饼图3d legend
.pie-legend {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  &-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;

    .icon {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      border: 2px solid #17e6c3;
      box-sizing: border-box;
      margin-right: 10px;
    }
    .name {
      font-weight: 500;
      font-size: 12px;
      color: #ffffff;
    }
    .value {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-end;
      justify-content: flex-end;
      width: 80px;
      text-align: right;

      font-weight: bold;
      color: #ffffff;
      font-family: D-DIN;
      font-weight: bold;
      font-size: 16px;
      .unit {
        font-family: D-DIN;
        font-weight: 400;
        font-size: 10px;
        color: #ffffff;
        opacity: 0.5;
        padding-left: 10px;
      }
    }
  }
}
.ct_group{
  padding: 27px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 34px;
  position: relative;
  .ct_group_item{
    width: calc((100% - 69px) / 3);
    text-align: center;
    .ct_group_item_img{
      width: 32px;
      height: 32px;
      display: block;
      margin: 0 auto;
    }
    .ct_group_item_title{
      font-weight: 500;
      font-size: 14px;
      color: #A1C2F9;
      line-height: 20px;
      margin-top:16px;
    }
    .ct_group_item_value{
      font-size: 14px;
      color: #FCFCFC;
      line-height: 18px;
      font-weight: 600;
      margin-bottom: 3px;
      margin-top: 10px;
      font-family: "Douyu";
      cursor: pointer;
    }
    .ct_group_item_unit{
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 20px;
      margin-left: 4px;
      color: rgba(255,255,255,0.6);
      font-family: "微软雅黑";
    }

  }
}
.ct_group::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient( 180deg, #1B407D 0%, rgba(8,58,123,0.68) 100%);
  opacity: 0.2;
}
</style>
